import Taro, { Component } from '@tarojs/taro'
import { View, Text ,Input } from '@tarojs/components'
import { AtButton, AtTag, AtInput } from 'taro-ui'
import './medical.css'
import app from '../../../../main';

export default class Medical extends Component{

    config={
        navigationBarTitleText: '设置病历标签'

    }
    constructor(){
        super(...arguments)
        this.state={
            tagStyle: [],
            receive_array:[],
            select_array:[],
            ids:[],
            getTags:[],
            id:this.$router.params.id,
            value:'',
            doctor_id:''
        }
    }

    componentDidShow() {
        // setTimeout(res=>{
        //     this.getTags();
        // },500)
        this.resAllTags();
    }

    componentWillMount () {

    }

    // 调用api接口 get 某病历所打的标签
    getTags(){
        let me = this;
        let all = [];
        let bll = [];
        let cll = me.state.receive_array
        let dll = me.state.tagStyle
        let data = {
            id:me.state.id
        }
        app.get('web/caselabel/case_labels',data,function(res){
            // console.log(res)
            me.setState({
                getTags:res.data.result
            },()=>{
                for(let val of me.state.receive_array){
                    for(let cal of me.state.getTags){
                        if(cal.id==val.id){
                            all.push(val.id)
                            bll.push(val)
                        }
                    }                
                }
                me.setState({
                    ids:all,
                    select_array:bll
                },()=>{
                    // console.log(all)
                    // console.log(me.state.receive_array)
                    for(let i=0; i<cll.length; i++){
                        for(let gal of all){
                            if(cll[i].id==gal){
                                dll.splice(i,1,'tag')
                            }                           
                        }
                    }
                    me.setState({
                        tagStyle:dll
                    })
                })
            
            })
        })
    }

    //点击标签
    handleClick(id,index){
        let me = this;
        let arr = me.state.select_array;
        let brr = me.state.tagStyle;
        let crr = me.state.ids
        if(me.state.tagStyle[index]=='tagNosel'){
            brr.splice(index,1,'tag')
            me.setState({
                tagStyle:brr
            })
            arr.push(me.state.receive_array[index])
            crr.push(me.state.receive_array[index].id)
        }else{
            brr.splice(index,1,'tagNosel')
            me.setState({
                tagStyle:brr
            })
            for(let val of me.state.select_array){
                if(val.id==id){
                    arr.splice(arr.indexOf(val),1)
                    crr.splice(arr.indexOf(val.id),1)
                }
            }
        }
    }

    //调用api接口 get 请求所有标签
    resAllTags(){
        let me = this;
        let arr = [];
        let data={}
        app.get('web/caselabel/many', data, function(res){
            console.log(res)
            me.setState({
                receive_array:res.data.result,
                doctor_id:res.data.result[0].doctor_id
            },()=>{
                for(let i=0 ; i<me.state.receive_array.length;i++){
                    arr.push('tagNosel')
                    me.setState({
                        tagStyle:arr,
                    },()=>{
                        me.getTags();
                    })
                }
            })
        })

        app.get('web/doctor/get', data, (ress)=>{
            me.setState({
                doctor_id:ress.data.result.id
            })
        })
    }

    //保存按钮 post
    saveBtn(num){
        let me = this;
        let id = me.state.id
        let ids = me.state.ids
        let data={
            case_id:id,
            label_ids:ids
        }
        app.post('web/caselabel/set_case_labels', data, function(res){
            // console.log('发送的参数')
            // console.log(res)
        })
        if(num==0){
            app.redirectTo('../../../doctorpages/editCase/editCase?id='+id)
            console.log('0')
        }else{
            console.log('1')
        }
    }

    //输入框
    handleChange(res){
        console.log(res.detail.value)
        this.setState({
            value:res.detail.value
        })
    }

    //新建标签
    creatTag(){
        if(this.state.value == ''){
            Taro.showModal({
                title: '提示',
                content: '新标签名称不能为空',
                showCancel:false
            })
        }else{
            this.saveBtn();
            let me = this;
            let data = {
                token:20,
                label_name:me.state.value,
                doctor_id:me.state.doctor_id,
                case_id:me.state.id
            }
            app.post('web/caselabel/create', data, function(res){
                // console.log(res)
                me.setState({
                    value:'',
                    select_array:[],
                    ids:[],
                    tagStyle:[],
                },()=>{
                    me.resAllTags();
                     
                    // setTimeout(res=>{
                    //     me.getTags();
                    // },500)
                })
            })
        }      
        
    }
    
    render(){
        return(
            <View className='all'>
                <View className='top-tag'>
                    {
                        this.state.select_array.map((item) => {
                            return (
                                    <AtTag 
                                        name='' 
                                        type=''
                                        className='tag'
                                    >
                                    {item.name}
                                    </AtTag>
                            )
                        })
                    }
                                                    
                    <View className='box'>
                        <View className ='input'>
                            <Input
                                // name='value'
                                className='text'
                                type='text'
                                value={this.state.value}
                                onInput={this.handleChange.bind(this)}
                                placeholder='输入新标签'
                            />
                        </View>
                        <AtTag
                            name='tag-3'
                            type='text'
                            className='tag-nosel'
                            onClick={this.creatTag.bind(this)}
                        >
                        +
                        </AtTag>
                    </View>

                </View>

                <View className='top-text'>
                    <Text>所有标签</Text>
                </View>


                <View className='center-tags'>
                    {
                        this.state.receive_array.map((item,index) => {
                            return (
                                    <AtTag
                                        name={JSON.stringify(item.id)} 
                                        type=''
                                        className={this.state.tagStyle[index]}
                                        onClick={this.handleClick.bind(this, item.id,index)}
                                        >
                                        {item.name}
                                    </AtTag> 
                            )
                        })
                    }
                    
                </View>

                <View className='empty'></View>


                <View className='botton'>
                    <AtButton type='' className='botton-btn' onClick={this.saveBtn.bind(this,0)}>保存</AtButton>
                </View>
            </View>
            )
        }
}
